<template>
  <div id="app">
    <div id="header">
      <div id="tp">
        <div id="left">
          <a href="/">严选网</a>
          <a href="javascript:void(0)">宁波</a>
          <a href="detail">买车</a>
          <a href="saleCar">卖车</a>
          <a href="forumIndex">论坛</a>
          <a href="javascript:void(0)">服务保障</a>
          <a href="partner">加盟合伙人</a>
          <ul id="right">
            <li v-if="isLogin == false">
              <a href="login" style="color: white;font-size:16px;margin-right: 30px">登录</a>
            </li>
            <li v-else>
              <span style="color: white;font-size:16px;margin-right: 20px">{{ this.username }}</span>
            </li>
            <li v-if="isLogin == false">
              <a href="register" style="color: white;font-size:16px;margin-right: 0">注册</a>
            </li>
            <li v-else>
              <input type="button" value="登出" @click="logout" style="font-size: 16px;color: white;background-color: #052F74;border: none">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div id="main">
      <div>
        <el-row>
          <el-col :span="24">
            <el-card>
              <div class="fuw">免费电话咨询</div>
              <div class="fuw">专业顾问陪同看车</div>
              <div class="fuw">一站交易过户</div>
              <div class="fuw">安享售后保障</div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div id="bz">
        <p>人人车、太平洋产险联合保障</p>
        <span>90天内重大事故车退车</span>
        <div>
          <a href="">退车流程</a>
          <a href="">售后质保</a>
        </div>
      </div>
      <div id="bw">
        <div class="a">
          <div class="a1">重大事故车投诉专线</div>
          <div class="a2">拨打400-861-0500转6 专人接待</div>
        </div>
        <div class="a">
          <div class="a1">2小时内响应</div>
          <div class="a2">专业人员陪同复查情况</div>
        </div>
        <div class="a">
          <div class="a1">48小时极速退车</div>
          <div class="a2">双方确认重大事故车及时退车</div>
        </div>
      </div>
      <div class="title">
        <div>
          <h3>安全有保障</h3>
          <p>严格的检测把关，拒绝重大事故车，只为更安全</p>
        </div>
      </div>
      <div class="content">
        <video  poster="images/service_guarantee_img/cover_one.png"
                controls
                style=" width: 750px; height: 422px;">
          <!--source标签用来设置播放资源-->
          <source src="https://img1.rrcimg.com/dist/pc/100-moments.mp4" type="video/mp4">
          <track default="" kind="captions" srclang="en">
          您的浏览器不支持播放此视频.
        </video>
      </div>
      <div class="title">
        <div>
          <h3>车源有保障</h3>
          <p>249项标准专业检测，精选放心车源，拒绝重大事故车、水泡车、火烧车</p>
        </div>
      </div>
      <div class="content">
        <video  poster="images/service_guarantee_img/cover_two.png"
                controls
                style=" width: 750px; height: 422px;">
          <!--source标签用来设置播放资源-->
          <source src="https://img1.rrcimg.com/dist/249-report.mp4" type="video/mp4">
          <track default="" kind="captions" srclang="en">
          您的浏览器不支持播放此视频.
        </video>
      </div>
      <div class="title">
        <div>
          <h3>车源有保障</h3>
          <p>精选优质车源，从源头上把控质量</p>
        </div>
      </div>
      <div class="content">
        <img src="images/service_guarantee_img/vehicle_source.jpg" alt="">
      </div>
      <div class="title">
        <div>
          <h3>车况有保障</h3>
          <p>249项标准专业检测，精选放心车源，拒绝重大事故车、水泡车、火烧车</p>
        </div>
      </div>
      <div class="content">
        <img src="images/service_guarantee_img/condition.png" alt="">
      </div>
      <div class="title">
        <div>
          <h3>服务有保障</h3>
          <p>重大事故车90天可退，1年／2万公里质保，任何问题联系人人车，一站为您处理</p>
        </div>
      </div>
      <div class="content">
        <img src="images/service_guarantee_img/service.jpg" alt="">
      </div>
      <div class="title">
        <div>
          <h3>人人问答</h3>
        </div>
      </div>
      <div id="QA">
        <div class="column">
          <div>
            <h5>
              <span>Q1</span>
              人人车是谁？
            </h5>
            <p>
              人人车深耕二手车交易服务，透明交易让普通用户也可以用公平的市场价格，买到精选优质二手车。人人车以资深评估师和手持设备为质量把关，排除重大事故车，火烧车，水泡车。在车辆过户前，会进行二次深度上架检测，层层把关为您排除隐患。同时还为车辆提供1年/2万公里的售后质保，车源14天无忧退，重大事故车90天可退，让用户无后顾之忧，可以放心购车、放心用车。
            </p>
          </div>
          <div>
            <h5>
              <span>Q2</span>
              在人人车买车有哪些费用？
            </h5>
            <p>费用包括4部分：</p>
            <p>1、车款：直接与卖家商议、交付。</p>
            <p>
              2、过户服务费：如客户选择由人人车代为办理过户的，费用由人人车收取（过户服务费包括了支付给人人车的服务费、缴纳给或支付给当地汽车交易市场、车管所等的费用）不同城市、不同车辆费用不同。
            </p>
            <p>3、人人车居间服务费：人人车按车辆价款收取一定比例的居间服务费。</p>
            <p>4、售后保障费：车辆价款一定比例的售后保障费，客户可以选购。</p>
            <p>其他：贷款手续费、保险以及异地购车等项目因车而异，详细可咨询当地服务顾问，或拨打4008-610-500。</p>
          </div>
          <div>
            <h5>
              <span>Q4</span>
              车辆出现问题怎么办？
            </h5>
            <p>
              人人车提供完善的售后服务，承诺车源14天无忧退，重大事故车90天可退，并提供1年2万公里质保，出现任何问题都可以免费拨打4008-610-500，联系您的专属用车管家。
            </p>
          </div>
        </div>
        <div class="column">
          <div>
            <h5>
              <span>Q3</span>
              交易过户怎么办理？
            </h5>
            <li>交易过户</li>
            <p>您选择由人人车代办过户相关手续的，人人车将为您代办过户相关的所有手续，向您收集所需材料，全程专人代办，免除来回奔波、排队的困扰，一站完成交易。</p>
            <li>分期贷款</li>
            <p>人人车提供分期付款服务，甄选合作银行及金融机构，多种金融产品解决资金问题，助您提前开好车。</p>
            <li>车辆保险</li>
            <p>通过人人车购买保险的，人人车全程代办车险，保险期内发生单、双方事故，致电4008-610-500，人人车为双方提供全程代办维修直赔。同时提供代办验车、上门更换车窗玻璃、全国范围内故障车辆免费救援等便捷服务。</p>
            <li>车辆养护</li>
            <p>人人车提供汽车维修、保养、美容等服务，全国近1000家服务网点放心选择。零部件品质及技要求遵照汽车生产厂家标准。<br>*以上服务不同城市、车辆费用不同</p>
          </div>
        </div>
      </div>
    </div>
    <div id="r-footer">
      <div class="r-footer-container">
        <div class="guarantee"></div>
        <div class="link-clearfix">
          <div class="link-left">
            <div class="link-left_item">
              <div class="link-left_item-title">
                <a href="introduction" style="color:#FFFFFF;">关于我们</a>
              </div>
              <ul>
                <li><a href="javascript:void(0)">公司介绍</a></li>
                <li><a href="javascript:void(0)">联系我们</a></li>
                <li><a href="partner">加入我们</a></li>
                <li><a href="partner">加盟合伙人</a></li>
              </ul>
              <ul>
                <li><a href="javascript:void(0)">用户服务协议</a></li>
                <li><a href="javascript:void(0)">隐私政策</a></li>
                <li><a href="javascript:void(0)">法律声明</a></li>
                <li><a href="javascript:void(0)">协议及声明</a></li>
              </ul>
            </div>
            <div class="link-left_item" style="width: 140px">
              <div class="link-left_item-title">交易流程</div>
              <ul>
                <li><a href="javascript:void(0)">买车流程</a></li>
                <li><a href="javascript:void(0)">卖车流程</a></li>
                <li><a href="javascript:void(0)">异地购车</a></li>
              </ul>
            </div>
            <div class="link-left_item">
              <div class="link-left_item-title">二手车精选</div>
              <ul>
                <li><a href="javascript:void(0)">车型库</a></li>
                <li><a href="javascript:void(0)">二手车资讯</a></li>
                <li><a href="javascript:void(0)">二手车问答</a></li>
              </ul>
              <ul>
                <li><a href="javascript:void(0)">二手车估价</a></li>
                <li><a href="javascript:void(0)">二手车迁入标准</a></li>
              </ul>
            </div>
          </div>
          <div class="link-right">
            <div class="link-right_tel">
              <div class="number">400-039-6051</div>
              <div class="time">周一至周日 9:00-18:00</div>
              <div class="text">免费咨询(咨询、建议、投诉)</div>
            </div>
            <div class="link-right_app">
              <div class="r-item">
                <span>关注微信</span>
                <div class="lazyload">
                  <img src="images/salecar_img/wechat.jpg" alt="" style="width: 100%;">
                </div>
              </div>
              <div class="r-item">
                <span>下载APP</span>
                <div class="lazyload">
                  <img src="images/salecar_img/down-app.png" alt="" style="width: 100%;">
                </div>
              </div>
            </div>
            <div class="link-right_sns">
            </div>
          </div>
        </div>
      </div>
      <div id="r-footer-copyright">
        <div class="r-footer-copyright-container">
          <img src="images/salecar_img/wangbei.png" alt="" >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      username: '',
      isLogin: false
    }
  },
  methods:{
    logout(){
      localStorage.clear();
      location.reload();
    }
  },
  mounted() {
    if (localStorage.getItem('formData') != null) {
      let str = localStorage.getItem('formData');
      this.username = str.substring(9,str.indexOf('&'));
      this.isLogin = true;
    }
  }
}
</script>

<style>
body{margin: 0}
#app{text-align: left}
#header{background-color: #052F74;}

#header>div,#main>div{
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

a{text-decoration: none}
#left{
  height: 59px;
  line-height: 59px;
  position: relative;
}
#left a{
  font-size: 16px;
  color: white;
}
#left a{margin-right: 30px}
#left a:hover{color: red}

#right{float: right}
#right li{float: left;
  font-size: 16px;
  height: 59px;
  line-height: 59px;
}

#tp{
  background-image: url("/public/images/service_guarantee_img/back_img.png");
  height: 553px;
}
.fuw{
  float: left;
  height: 100px;
  line-height: 100px;
  font-size: 24px;
  color: #C07C3D;
  margin: 0 63px;
}
#bz{text-align: center}
#bz>div>a{
  background: #cc996a;
  height: 25px;
  width: 105px;
  color: white;
}
#bz>p{
  font-size: 36px;
  color: #cc996a;
  margin: 50px 0 0 0;
}
#bz>span{
  font-size: 18px;
  color: #e0be94;
}
#bz>div{
  margin: 10px 0 50px 0;
}
.a{
  float: left;
  margin: 0 80px auto;
}
.a1{
  color: #4a4c53;
  font-size: 30px;
}
.a2{
  color: #8b8f9c;
  font-size: 18px;
}
.title{
  font-size: 36px;
  color: #ad6e34;
  text-align: center;
  padding-top: 60px;
}
.title>div>h3{
  margin-bottom: 0;
}
.title>div>p{
  margin-top: 0;
  font-size: 20px;
}
.content{
  text-align: center;
}
.column{
  float: left;
  padding: 22px 50px;
  margin-left: 0;
}
.column>div{
  width: 500px;
}
.column span{
  color: #999;
}
.column h5{
  font-size: 18px;
  color: #333;
}
.column p,li{
  font-size: 14px;
  color: #999999;
}
h3{
  font-weight: normal;
  padding-bottom: 10px;
}
h5{
  font-weight: normal;
}

#r-footer {
  background-color: #4c4c4c;
  width: 100%;
  height: 400px;
}

.r-footer-container {
  width: 1200px;
  height: 320px;
  margin: 0 auto;

}

.guarantee {
  height: 74px;
  font-size: 16px;
  color: #fff;
  background-image: url("/public/images/salecar_img/b1.png");
}

.link-clearfix {
  width: 1200px;
  height: 160px;
  margin: 40px auto;
}

.link-left {
  width: 758px;
  height: 123px;
  float: left;
}

.link-left_item {
  width: 300px;
  height: 123px;
  margin-bottom: 6px;
  display: inline-block;
  vertical-align: top;
}

.link-left_item-title {
  width: 234px;
  height: 21px;
  font-size: 16px;
  color: #fff;
  margin: 0 0 10px 0;
}

ul {
  display: inline-block;
  padding: 0;
  margin: 0 40px 0 0;
  vertical-align: top;
}

li {
  line-height: 24px;
  font-size: 14px;
  list-style: none;
}

li > a {
  color: #adadad;
}

.link-right{
  float: right;
  width: 440px;
  position: relative;
}
.link-right_tel{
  width: 160px;
  float: left;
  color: #fff;
}
.number{
  font-size: 22px;
  line-height: 34px;
  margin-top: 20px;
}
.time{
  font-size: 14px;
}
.text{
  font-size: 12px;
  line-height: 24px;
  margin: 5px 0 0;
  color: #979797;
}
.link-right_app{
  float: left;
  width: 272px;
  height: 136px;
}
.r-item{
  width: 88px;
  float: left;
  text-align: center;
  margin-left: 32px;
}
.r-item>span{
  color: #bbbbbb;
  padding-bottom: 8px;
  margin: 0 auto;
}
.lazyload{
  margin: 8px 0 24px 0;
  width: 88px;
  height: 88px;
}
.link-right_sns{
  display: block;
  float: left;
  width: 424px;
  height: 24px;
  background-image: url("/public/images/salecar_img/sns1.png");
}
#r-footer-copyright{
  width: 100%;
  height: 80px;
  font-size: 12px;
  color: #fff;
  background-color: #2f2f2f;

}
.r-footer-copyright-container{
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
</style>